import React, {Component} from 'react';
import {connect} from "react-redux";
import {Image, message, Popconfirm, Table, Tooltip} from 'antd';


class MomentList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pageNum: 1,
            pageSize: 10,
            userName: '',
            email: '',
            gender: '',
            phone: '',
            startTime: '',
            endTime: '',
            visible: false,
            record: {},
        }

        this.columns = [
            {
                title: 'ID',
                dataIndex: 'mid',
                width: 200,


            },
            {
                title: '用户名',
                dataIndex: 'name',
                align: 'center',
                width: 200,


            },
            {
                title: '内容',
                dataIndex: 'title',

                render: title => (
                    <Tooltip placement="topLeft" title={title}>
                        <div style={{
                            width: 150,
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            whiteSpace: "nowrap"
                        }}>
                            {title}
                        </div>
                    </Tooltip>
                ),

            },
            {
                title: '图片/视频',
                align: 'center',
                render: (_, record) =>
                    (<div>
                        {record.item ? record.item.map((i,k) => (<Image style={{width:40,height:40,marginLeft:10}} key={k} src={i.url}/>)) : ''}
                    </div>)


            },
            {
                title: '时间',
                dataIndex: 'addTime',
                align: 'center',
            },

            {
                title: '操作',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            <Popconfirm
                                title="确定删除吗？"
                                onConfirm={() => this.deleteMoments(record)}
                                okText="删除"
                                cancelText="取消"
                            >
                                <a>删除</a>
                            </Popconfirm>
                        </div>
                    )
                }
            },


        ];
    }

    componentDidMount() {
        this.init();
    }

    init = () => {
        const {moments} = this.props
        moments({page: 1, size: 5})
    }

    handleChangeMomentsList = (current, pageSize) => {
        this.props.moments({page: current, size: 5})
    }
    deleteMoments = (record) => {
        this.props.delDynamic({id: record.id}).then(res => {
            message.success('删除成功')
            this.props.moments({page: 1, size: 5})
        })
        // this.handleCancel()
    }
    // delDynamic = () => {
    //

    // }

    visible = (vis) => {
        this.setState({
            visible: vis
        })
        console.log('vv', vis)
    }

    render() {
        const {momentsData, userLoading} = this.props;


        const pagination = {
            current: momentsData.current,//当前页
            total: momentsData.total,//总条数
            pageSize: momentsData.size,//页大小
            onChange: this.handleChangeMomentsList,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Table scroll={{y: 625}} columns={this.columns} loading={userLoading}
                       dataSource={momentsData.records} rowKey={record => record.id} pagination={pagination}
                />
                {/* <Modal visible={visible} title='用户禁用' footer={null} onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                    <div className={style.modalText}>确定删除吗？</div>
                    <div className={style.modalBtn}>
                        <Button type='primary' onClick={this.handleCancel}>取消</Button>
                        <Button type='primary' onClick={this.delDynamic} style={{ marginLeft: 30 }}>确定</Button>
                    </div>

                </Modal> */}
            </div>
        );
    }
}


const mapState = state => ({
    ...state.moments
});

const mapDispatch = dispatch => ({
    ...dispatch.moments

})

export default connect(mapState, mapDispatch)(MomentList);